<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/element-ui.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/content.css">
    <link rel="stylesheet" href="../css/search.css">
    <script src="../js/vue.js"></script>
    <script src="../js/element-ui.js"></script>
    <script src="../js/common.js"></script>
</head>
<body>
<div id="app">
    <el-backtop :bottom="120"></el-backtop>
    <el-container>
        <el-header>
            <el-image fit="cover" src="../images/logo.png"></el-image>
            <div class="top-nav">
                <div class="top-nav-group">
                    <el-link class="top-nav-item" :underline="false">
                        <span>测试链接</span>
                    </el-link>
                </div>
                <div class="top-nav-group">
                    <el-link class="top-nav-item" :underline="false">测试链接</el-link>
                </div>
                <div class="top-nav-group">
                    <el-link class="top-nav-item" :underline="false">测试链接</el-link>
                </div>
                <div class="top-nav-group">
                    <el-link class="top-nav-item" :underline="false">测试链接</el-link>
                </div>
                <div class="top-nav-group">
                    <el-link class="top-nav-item" :underline="false">测试链接</el-link>
                </div>
            </div>
        </el-header>
        <el-main>
            <nav class="main-nav">
<!--首页链接-->
                <transition name="el-zoom-in-bottom" mode="out-in">
                    <el-link :underline="false" v-show="search" class="main-nav-item">
                        <span>测试链接</span>
                    </el-link>
                </transition>
                <transition name="el-zoom-in-bottom" mode="out-in">
                    <el-dropdown v-show="search" trigger="click">
<!--下拉栏按钮-->
                    <span class="el-dropdown-link main-nav-item">
                        测试链接<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
<!--子链接-->
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </transition>
                <transition name="el-zoom-in-bottom">
                    <el-dropdown v-show="search" trigger="click">
                    <span class="el-dropdown-link main-nav-item">
                        测试链接<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </transition>
                <transition name="el-zoom-in-bottom" mode="out-in">
                    <el-dropdown v-show="search" trigger="click">
                    <span class="el-dropdown-link main-nav-item">
                        测试链接<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </transition>
                <transition name="el-zoom-in-bottom" mode="out-in">
                    <el-dropdown v-show="search" trigger="click">
                    <span class="el-dropdown-link main-nav-item">
                        测试链接<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </transition>
                <transition name="el-zoom-in-bottom" mode="out-in">
                    <el-dropdown v-show="search" trigger="click">
                    <span class="el-dropdown-link main-nav-item">
                        测试链接<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </transition>
                <transition name="el-zoom-in-bottom" mode="out-in">
                    <el-dropdown v-show="search" trigger="click">
                    <span class="el-dropdown-link main-nav-item">
                        测试链接<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </transition>
                <div class="search-group">
                    <div class="el-icon-search" @click="searchExpand" v-show="search"></div>
                </div>
                <transition name="el-zoom-in-top">
<!--                    输入的内容绑定到下方的searchInput中-->
                    <el-input size="mini" class="search-input" v-model="searchInput" placeholder="请输入内容" v-show="!search">
                        <i slot="suffix" class="el-input__icon el-icon-close" @click="searchExpand"></i>
                        <el-button slot="append" icon="el-icon-search" @click="searchButton"></el-button>
                    </el-input>
                </transition>
            </nav>
            <div class="content">
                <div class="main">
                    <div class="article-name">搜索结果</div>
                    <ul>
                        <li class="search-item" v-for="item in 5">
                            <div class="search-item-name">
                                <a href="#">
                                    文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试
                                    文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试
                                </a>
                            </div>
                            <div class="search-item-content">
                                &nbsp;&nbsp;文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试
                                文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试
                                文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试
                                文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试
                                文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试
                                文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试
                                文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试
                                文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试
                            </div>
                            <div class="search-item-time">
                                <span>发表时间:</span>
                                <span class="time">2020年02月05日</span>
                            </div>
                        </li>
                    </ul>
                    <div style="display: flex;align-items: center;justify-content: center">
                        <span class="page-text">共有</span>
                        <span class="page-num">{{ this.total }}</span>
                        <span class="page-text">条</span>
                        <el-pagination
                                layout="slot,prev, next"
                                :current-page="pages"
                                prev-text="上一页"
                                next-text="下一页"
                                :page-size="pageSize"
                                @prev-click="prevpage"
                                @next-click="nextpage"
                                :total="this.total">
                            <span class="page-btn">首页</span>
                        </el-pagination>
                        <span class="page-btn">尾页</span>
                        <span class="page-text">共有</span>
                        <span class="page-num">{{ this.total / this.pageSize }}</span>
                        <span class="page-text">页</span>
                        <span class="page-text">当前第</span>
                        <span class="page-num">{{this.pages}}</span>
                        <span class="page-text">页</span>
                    </div>
                </div>
                <div class="img-group">
                    <img src="../images/show1.jpg">
                    <img src="../images/show2.jpg">
                    <img src="../images/show3.jpg">
                    <img src="../images/show4.jpg">
                    <img src="../images/show5.jpg">
                </div>
            </div>
        </el-main>
        <el-footer>
            <div class="footer-text-group">
                <div class="footer-text">地址：四川省雅安市雨城区新康路46号第四行政办公楼</div>
                <div class="footer-text">联系方式：0835—2882230 邮箱：aumdxtw@sicau.edu.cn</div>
                <div class="footer-text">Copyright ©2017 四川农业大学团委 All Rights Reserved.</div>
            </div>
            <div class="footer-img-group">
                <img class="footer-img" src="../images/foot1.jpg">
                <img class="footer-img" src="../images/foot2.png">
                <img class="footer-img" src="../images/foot3.png">
                <img class="footer-img" src="../images/foot4.png">
            </div>
        </el-footer>
    </el-container>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                show: true,
                isCollapse: true,
                search: true,
                pages:1,//当前页
                total:50,//总条数
                pageSize:5,//每页多少条数据
                searchInput:'',//搜索框内容
            }
        },
        methods: {
            searchExpand() {
                this.search = !this.search
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            prevpage(){
                this.pages--
            },
            nextpage(){
                this.pages++
            },
            jumpPage(val){
                switch(val){
                    case "1"://跳转到首页
                        this.$emit('changeCurrentPage', 1);
                        break;
                    case "0"://跳转到末页
                        this.$emit('changeCurrentPage', this.total/this.pageSize);
                        break;
                }
            },
            searchButton(){
                // 搜索函数
            }
        },
        mounted() {
            let that = this
            window.onload = function () {
                let loadTime = window.performance.timing.domContentLoadedEventEnd - window.performance.timing.navigationStart;
                if (loadTime <= 1000) {
                    setTimeout(function () {
                        that.show = false
                    }, 1000);
                } else {
                    that.show = false
                }
            }
        }
    })
</script>
</html>
